<!--保养项目-->
<template>
  <div class="totalStyle datadictionary">
    <div class="tablestyle">
      <div class="titleStyle">
        <p   class="leftTitle font_w">公告</p>
        <el-button type="primary"   @click="handleBuild">新建</el-button>
      </div>
      <div class="bottomBox">
        <div class="searchsize">
          <el-col  class="searchBox">
            <el-input
                class="w-10 m-2 mr-16 float-left"
                v-model="modeldata.searchValue.keyWrod"
                placeholder="请输入公告标题/发布单位"
                clearable
                maxlength="50"
            />
            <el-button type="primary" plain  @click="queryTableData"
            >查询</el-button>
          </el-col>
        </div>
        <div class="chartstyle">
          <el-table
              :data="modeldata.table.tableData"
              :header-cell-style="{ background: '#F2F5FA' }"
              border
              style="width: 100%"
          >
            <el-table-column prop="title"   label="公告标题" min-width="10%" />
            <el-table-column prop="publisherName"  label="发布单位" min-width="10%" />
            <el-table-column prop="publisherTime" label= '发布时间' min-width="10%" />
            <el-table-column prop="createUserName" label= '添加人'  min-width="10%" />
            <el-table-column prop="createTime" label= '添加时间'  min-width="10%" />
            <el-table-column label="操作列" width="150" min-width="28%">
              <template #default="scope">
                <span class="buttonFun cursor" @click="handleLook(scope.$index, scope.row)">查看</span>
                <span class="buttonFun cursor" @click="handleEdit(scope.$index, scope.row)">编辑</span>
                <el-popconfirm
                    width="520"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    @confirm="handleDelete(scope.$index, scope.row)"
                    title="你确定要删除这条数据吗?">
                  <template #reference>
                    <span class="buttonFun cursor">删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty v-loading="modeldata.table.tableLoading"></el-empty>
            </template>
          </el-table>
          <div class="demo-pagination-block">
            <el-pagination
                :pageIndex="modeldata.table.pageIndex"
                :page-size="modeldata.table.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="modeldata.table.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <Dialog
        v-model="modeldata.dialog.dialogEditVisible"
        :dialogFormVisible="modeldata.dialog.dialogEditVisible"
        :dialogTitle="modeldata.dialog.title"
        :dialogTableValue="modeldata.dialog.tableData"
    ></Dialog>
    <Detail
        v-model="modeldata.dialog.dialoDetailVisible"
        :showDetail="modeldata.dialog.dialoDetailVisible"
        :dialogTableValue="modeldata.dialog.tableData"
    ></Detail>
  </div>

</template>
<script setup>
import Dialog from "./editdialog.vue";
import Detail from "./detail.vue";
import { onBeforeMount, watch, getCurrentInstance } from "vue";
import { reactive, ref, markRaw} from "vue";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import store from '@/store'
import {
  sysnoticeList as sysnoticeList,sysnoticeremove as sysnoticeremove
} from '@/api/user.js'
import {onMounted} from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const editDataRef = ref('');
const addform = ref('')
let modeldata =  reactive({
  dialogimgVisible:false,
  searchValue:{
    keyWrod:'',
  },
  dropdown:{
    levelList:[
      {
        label:'一级保养',
        value:"1"
      },{
        label:'二级保养',
        value:"2"
      },{
        label:'三级保养',
        value:"3"
      },{
        label:'四级保养',
        value:"4"
      },{
        label:'五级保养',
        value:"5"
      },{
        label:'日常保养',
        value:"6"
      },{
        label:'常规润滑',
        value:"7"
      }
    ],
    code:''
  },
  detail:{
    name:'明细',
    isShow: false,
    parentId:0
  },
  dialog: {
    dialogEditVisible:false,
    dialoDetailVisible:false,
    title:'新增',
    formData:{
    },
  },
  table:{
    tableLoading: false,
    pageIndex: 1,
    pageSize: 10,
    total:0,
    tableData: [],
  }
})
const queryTableData = () => {
  modeldata.table.tableLoading = true;
  // modeldata.searchValue.workType = ''
  let obj = JSON.parse(JSON.stringify(modeldata.searchValue))
  obj.pageIndex = modeldata.table.pageIndex
  obj.pageSize = modeldata.table.pageSize
  sysnoticeList(obj,obj.pageIndex,obj.pageSize)
      .then((res)=>{
        modeldata.table.tableLoading = false;
        console.log(res)
        if(res.code === 200){
          let data = res.body;
          modeldata.table.tableData=data.records&&data.records?data.records:[];
          modeldata.table.total = data&&data.total?data.total:0;
          // modeldata.table.tableData=data&&data.data?data.data:[];
          // modeldata.table.total = data&&data.total?data.total:0;
        }else{
          ElNotification({
            title: '警告',
            message: res.message?res.message:'服务器异常',
            type: 'warning',
          })
          if(res.code === 100007 ||  res.code === 100008){
            store.dispatch('app/logout')
          }
        }
        // getMaintenanceProjectCodeFun();
      })
      .catch(()=>{})
};
watch(
    () => modeldata.dialog.dialogEditVisible,
    () => {
      if(!modeldata.dialog.dialogEditVisible){
        queryTableData();
      }
    },
    { deep: true, immediate: true }
)

//切换一页显示多少条数据
const handleSizeChange = (val) => {
  modeldata.table.pageSize = val;
  queryTableData();
};
// 点击跳转到第几页
const handleCurrentChange = (val) => {
  modeldata.table.pageIndex = val;
  queryTableData();
};
//新建
const handleBuild = () => {
  modeldata.dialog.title = "新建";
  modeldata.dialog.dialogEditVisible = true;
};
//编辑
const handleEdit = (index, row) => {
  modeldata.dialog.title =   "编辑";
  modeldata.dialog.tableData = JSON.parse(JSON.stringify(row));
  modeldata.dialog.dialogEditVisible = true;
};
//查看
const handleLook = (index, row) => {
  modeldata.dialog.title =   "查看";
  modeldata.dialog.tableData = JSON.parse(JSON.stringify(row));
  modeldata.dialog.dialoDetailVisible = true;
};
//删除
const handleDelete = (index, row) => {
  sysnoticeremove(row.id).then((res)=>{
    if(res.code === 200){
      if(modeldata.table.tableData.length === 0&& modeldata.table.pageIndex>1){
        modeldata.table.pageIndex = modeldata.table.pageIndex -1;
      }
      queryTableData();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    }else{
      ElNotification({
        title: '警告',
        message: res.message?res.message:'服务器异常',
        type: 'warning',
      })
      if(res.code === 100007 ||  res.code === 100008){
        store.dispatch('app/logout')
      }
    }
  })
  // })
};

</script>
<style  lang = 'less' scoped>
.datadictionary{
    .searchBox{
        :deep(.el-input){
            width: 300px;
        }
    }
  :deep(.el-table--fit){
    height:100%;
  }
  :deep(.el-table__body-wrapper) {
    overflow-y: auto;
  }
  .bottomBox{
      padding: 16px;
        height: calc(100% - 48px);
    }
  .tablestyle {
    position: relative;
    :deep(.el-table__header thead tr) {
      background-color: rgba(64, 158, 255, 0.1);
    }
    :deep(.el-col-3 ){
      max-width: none;
    }
  }

  .demo-pagination-block {
    margin-top: 16px;
    position: absolute;
    bottom: 32px;
    right: 32px;
  }
  .dialogBox{
    :deep(.el-form--inline .el-form-item){
      width: 100%;
    }
    :deep(.el-input){
      width: 100%;
    }
    :deep(.el-form-item--default .el-form-item__content){
      width: calc(100% - 80px);
    }
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #cccccc;
      padding: 16px;
      margin-right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    :deep(.el-dialog__title) {
      color: #1C222C;
      font-size: 20px;
      width: 100px;
    }
    :deep(.el-dialog__headerbtn ){
      position: static;
      top: 0px;
      right: 0;
      padding: 0;
      width: auto;
      height: auto;
    }
  }

  .totalStyle{
    height: 100%;
  }

  .split{
    width: 1px;
    height: 20px;
    background-color: #DADFE6;
    margin: 0 16px;
  }
  .callback{
    cursor: pointer;
  }
}
</style>